import React from 'react';
import  '../../public/css/homePage.css';
import { inject, observer } from 'mobx-react';
import { Button,Modal,Input } from 'antd';

@inject('homePage')
@observer
export default class Homepage extends React.Component {
    componentDidMount() {
        this.props.homePage.getProductData()
    }
    render(){
        const userdata = JSON.parse(localStorage.getItem('userData')) ||'',{visible}=this.props.homePage
        return (
            <div className="clearfix bgcolor" >
                <div className="fl left">
                    <img src={require('../../public/images/head.jpg')} alt="" className="image" />
                    <div className="qi"><span className="user">{userdata.real_name?userdata.real_name:'暂无数据'}</span><em></em></div>
                    <ul>
                        <li><span>邮箱地址：</span>{userdata.email?userdata.email:'暂无数据'}</li>
                        <li><span>手机号码：</span>{userdata.phone?userdata.phone:'暂无数据'}</li>
                        <li><span>登录名：</span>{userdata.login_name?userdata.login_name:'暂无数据'}</li>
                        <li><span>计费方式：</span>{userdata.charge_type?userdata.charge_type==1?'预付费用户':'后付费用户':'暂无数据'}</li>
                    </ul>
                </div>
                <div className="fl right">
                    <div className="head">我的产品</div>
                    <ul className="tal">
                    {this.props.homePage.productData.map(function(e,i){
                        let charge_name=""
                        if(e.charge_type==0){ charge_name="包月计费"}
                        if(e.charge_type==1){ charge_name="包条数计费"}
                        if(e.charge_type==2){ charge_name="按次计费"}
                        return(
                        <li key={i} className="dib tal">
                            <span className="fl">{e.name}</span><span className="fr fontColor">{e.code}</span><br />
                            <span className="time fontColor" style={{'marginTop':'10px'}}><em></em>{'扣费日期：'+e.validEnd}</span><br />
                            <span className="line"></span><br />
                            <div className="fl tac ml-10 width25"><span>{e.bundle_price}</span><br/><span className="fontColor">产品价格</span></div><span className="heightLine"></span>
                            <div className="fl tac width25"><span className="minw">{charge_name}</span><br/><span className="fontColor">计费方式</span></div><span className="heightLine"></span>
                            <div className="fl tac width25"><span>{e.useCount}</span><br/><span className="fontColor">接口数</span></div>
                        </li>
                        )
                    })}
                    </ul>
                </div>
            </div>
        )
    }
}